<docs>
  ## 个人退休申请预约操作
</docs>
<template>
  <div>
    <mheader type="index" @back_btn="goBack()" title="个人退休申请预约"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <div class="first" v-show="firstFlag">
          <co-select
            prop="mz"
            label="民族"
            v-model="data.mz"
            attrid="dmid"
            attrname="dmmc"
            :list="mzList"
          ></co-select>
          <co-input prop="sjhm" label="手机号码" max-length="11" v-model="data.sjhm" placeholder="请输入"></co-input>
          <div class="picker">
            <label class="input-label" for>户口地址</label>
            <span id="trigger" class="_input">请选择</span>
          </div>
          <co-input prop="hkdz" label="详细地址" v-model="data.hkdz" placeholder="请输入"></co-input>
          <co-input prop="hkssjdsbs" label="户口所在街道社保所" v-model="data.hkssjdsbs" placeholder="请输入"></co-input>
          <co-select
            prop="lqtxjyhmc"
            label="领取退休金银行名称"
            v-model="data.lqtxjyhmc"
            attrid="dmid"
            attrname="dmmc"
            :list="yhList"
          ></co-select>
          <co-input prop="yhzh" label="银行账号" v-model="data.yhzh" placeholder="请输入"></co-input>

          <!-- 下一步 开始 -->
          <div class="next-step">
            <button class="btn btn-primary" @click="nextStep" type="button">下一步</button>
          </div>
        </div>
      </co-form>
        <div class="second" v-show="secondFlag">
          <div class="btm_line">
            <p>个人照片（必填）</p>
            <co-upload label="2寸近期免冠照片" ref="uploadHeader"></co-upload>
            <div class="_tip">上传资料支持jpg、png、bmp、jpeg格式的图片，大小不超过200kb；请平铺拍照或扫描图片，确保上传图片清晰完整。</div>
          </div>
          <div class="_photo">
            <p>上传资料（必填）</p>
            <co-upload label="身份证正面" ref="uploadStraight"></co-upload>
            <co-upload label="身份证反面" ref="uploadReverse"></co-upload>
            <p class="_tip">上传资料支持jpg、png、bmp、jpeg格式的图片，大小不超过200kb；请平铺拍照或扫描图片，确保上传图片清晰完整。</p>
          </div>
          <div class="_photo">
            <p>其他资料（必填）</p>
            <co-upload class="_left" label="户口本首页" ref="uploadBook1"></co-upload>
            <co-upload class="_right" label="户口本首页变更页" ref="uploadBook2"></co-upload>
            <co-upload class="_left" label="户口本本人页" ref="uploadBook3"></co-upload>
            <co-upload class="_right" label="户口本本人页变更页" ref="uploadBook4"></co-upload>
            <co-upload class="_left" label="领取退休金银行卡正面照片" ref="uploadBook5"></co-upload>
            <p class="_tip">上传资料支持jpg、png、bmp、jpeg格式的图片，大小不超过200kb；请平铺拍照或扫描图片，确保上传图片清晰完整。</p>
          </div>
          <div class="next-step">
            <button class="btn btn-primary" @click="revers">提交</button>
          </div>
        </div>
    </div>
    <!-- 申请成功或失败提示 -->
    <message-card
      :visible.sync="save.visible"
      :title="save.title"
      :btn-text="save.btnText"
      :btn-type="save.btnType"
      @btnClick="msgBtn"
      @iconCloseClick="iconCloseClick"
      :type="save.type ? 'success' : 'fail'"
    >
      <div class="msg-success" v-if="save.type">
        <p class="title">{{msgTitle}}</p>
      </div>
      <div class="msg-fail" v-else>
        <p class="title">{{msgTitle}}</p>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import coSelect from "@/base/form/select";
import coUpload from "@/base/upload/upload";
import PickerExtend from "picker-extend";
import $ from "common/js/axios";
import { validator } from "common/js/valid";
import { mixinValid } from "common/mixins/mixins";
import MessageCard from "@/ldry/group/messageCard/messageCard";

export default {
  components: { coForm, MessageCard, coInput, coSelect, Mheader, coUpload },
  name: "reverseOne",
  mixins: [mixinValid],
  data() {
    return {
      firstFlag: true,
      secondFlag: false,
      data: {
        mz: "",
        sjhm: "",
        hkdz: "",
        hkssjdsbs: "",
        lqtxjyhmc: "",
        hkszdxzqhmc: "",
        hkszdxzqh: "",
        yhzh: "",

        jqmgz_id:"",
        sfzzmz_id:"",
        sfzfmz_id:"",
        hkbsy_id:"",
        hkbbgy_id:"",
        hkbbry_id:"",
        hkbbrbgy_id:"",
        lqtxjyhkzm_id:"",
      },
      jygzList: [],
      positionArr: [],
      rules: {
        mz: validator('16,"full","民族",false'),
        sjhm: validator('11,"sjh","手机号码",false'),
        hkdz: validator('64,"full","详细地址",false'),
        hkssjdsbs: validator('64,"full","户口所在街道社保所",false'),
        lqtxjyhmc: validator('64,"full","领取退休金银行名称",false'),
        yhzh: validator('32,"number","银行账号",false')
      },
      save: {
        type: "",
        btnText: "",
        btnType: "",
        title: "",
        visible: false
      },
      msgTitle: "",
      mzList: [], //民族
      yhList: [] //银行
    };
  },
  mounted() {
    this.get_xzqh();
  },
  methods: {
    goBack() {
      if(this.firstFlag = true){
        this.$router.go(-1);
      } else{
        this.firstFlag = false;
        this.secondFlag = true;
      }
    },
    // 查询就业工种
    GET_jygzCx() {
      //代码表
      $.get("/dafwgl/dmb/dmb?dmbm=rsdagl_ld_d_nation,rsdagl_ld_d_khyh").then(
        res => {
          this.mzList = res.returnData.rsdagl_ld_d_nation; //民族
          this.yhList = res.returnData.rsdagl_ld_d_khyh; //银行
        }
      );
      //身份证
      $.get("/dafwgl/kjzm/tphx").then(res => {
        var res = res.returnData;
        if (res.executeResult === "1") {
          if (res.sfz.sfzzmz_id) {
            this.$refs.uploadStraight.flag = true;
            this.$refs.uploadStraight.tpid = res.sfz.sfzzmz_id;
            this.$refs.uploadStraight.imgSrc =
              conf.urlPrefix + "/dafwgl/wjscxz/tpxs?tpid=" + res.sfz.sfzzmz_id;
          }
          if (res.sfz.sfzfmz_id) {
            this.$refs.uploadReverse.flag = true;
            this.$refs.uploadReverse.tpid = res.sfz.sfzfmz_id;
            this.$refs.uploadReverse.imgSrc =
              conf.urlPrefix + "/dafwgl/wjscxz/tpxs?tpid=" + res.sfz.sfzfmz_id;
          }
        }
      });
    },
    // 下一步操作
    nextStep() {
      this.$refs.form.validate(() => {
        if (this.data.xghlxdzxzqh == "") {
          this.$refs.form.errorMsg = "户口地址不能为空！";
          return;
        }
        this.firstFlag = false;
        this.secondFlag = true;
      });
    },
    // 提交
    revers() {
      if (this.$refs.uploadStraight.tpid == "") {
        this.$refs.form.errorMsg = "两寸免冠照片未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadStraight.tpid == "") {
        this.$refs.form.errorMsg = "身份证正面照片未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadReverse.tpid == "") {
        this.$refs.form.errorMsg = "身份证反面照片未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadBook1.tpid == "") {
        this.$refs.form.errorMsg = "户口本首页未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadBook2.tpid == "") {
        this.$refs.form.errorMsg = "户口本首页变更页未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadBook3.tpid == "") {
        this.$refs.form.errorMsg = "户口本本人页未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadBook4.tpid == "") {
        this.$refs.form.errorMsg = "户口本人页变更未上传成功，请核实后提交！";
        return;
      }
      if (this.$refs.uploadBook5.tpid == "") {
        this.$refs.form.errorMsg = "银行卡正面照片未上传成功，请核实后提交！";
        return;
      }
      this.data.jqmgz_id = this.$refs.uploadHeader.tpid;
      this.data.sfzzmz_id = this.$refs.uploadStraight.tpid;
      this.data.sfzfmz_id = this.$refs.uploadReverse.tpid;
      this.data.hkbsy_id = this.$refs.uploadBook1.tpid;
      this.data.hkbbgy_id = this.$refs.uploadBook2.tpid;
      this.data.hkbbry_id = this.$refs.uploadBook3.tpid;
      this.data.hkbbrbgy_id = this.$refs.uploadBook4.tpid;
      this.data.lqtxjyhkzm_id = this.$refs.uploadBook5.tpid;
      this.POST_reverse();
    },
    // 提交接口
    POST_reverse() {
      $.post("/dafwgl/txsq/sqBc", this.data)
        .then(res => {
          const data = res.returnData;
          if (parseInt(data.executeResult, 10) === 1) {
            this.msgTitle = data.message.replace(/右侧/, "");
            this.save = {
              type: 'success',
              btnText: "查询我的申请",
              btnType: "gray",
              title: "提交成功！",
              visible: true
            };
          } else {
            this.save = {
              type: 'fail',
              btnText: "重新选择",
              btnType: "primary",
              title: "提交失败！",
              visible: true
            };
            this.msgTitle = data.msg;
          }
        })
        .catch(() => {});
    },
    // 返回消息按钮点击处理
    msgBtn() {
      // 成功
      if (this.save.type==='success') {
        this.$router.push({ name: "txyylist" });
      } else if(this.save.type==='fail') {
        this.save.visible = false;
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      this.$router.push({ name: "index" });
    },
    get_xzqh() {
      $.get("static/bjs4j.json").then(res => {
        this.jygzList = res;
        let posiArr = this.randerPosition(this.jygzList, "");
        this.xzqh(this.jygzList, posiArr);
      });
    },
    randerPosition(all, tarid) {
      let _tarid = tarid || "110000000000";
      let _arr = [];
      let _item1 = _tarid.substring(0, 3) + "000000000";
      let _item2 = _tarid.substring(0, 6) + "000000";
      let _item3 = _tarid.substring(0, 9) + "000";
      let _item4 = _tarid;
      this.dgArr(all, _item1);
      this.dgArr(all, _item2);
      this.dgArr(all, _item3);
      this.dgArr(all, _item4);
      return this.positionArr;
    },
    dgArr(all, str) {
      all.forEach((item, index) => {
        if (item.id == str) {
          this.positionArr.push(index);
          return;
        } else if (item.children) {
          this.dgArr(item.children, str);
        }
      });
    },
    xzqh(jygzList, posi) {
      var _this = this;
      var _position = posi || [0, 0, 0, 0];
      var pickerExtend = new PickerExtend({
        trigger: "#trigger",
        title: "户口地址",
        wheels: [{ data: jygzList }],
        keyMap: {
          id: "id",
          value: "name",
          childs: "children"
        },
        // flexibleHeight: "80",
        connector: "",
        position: _position,
        callback: function(indexArr, res) {
          let _data = res.pop();
          _this.data.hkszdxzqhmc = _data.name;
          _this.data.hkszdxzqh = _data.id;
        }
      });
    }
  },
  created() {
    this.GET_jygzCx();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.choice {
  padding-left: $padding-base;
  background-color: #fff;
  // margin-top: $margin-base * 3;
  border: $border;
}
.next-step {
  // margin-top: $margin-base;
  width: 100%;
  box-sizing: border-box;
  padding: $padding-base;
  padding-left: 0;
  .btn {
    width: 100%;
  }
}
.picker {
  position: relative;
  display: flex;
  align-items: center;
  display: flex;
  border-bottom: 1px solid #dbdbdb;
  .input-label {
    flex: 0 1 83%;
    font-size: 0.44444rem;
    color: #333;
    padding: 0.0463rem 0;
  }
  ._input {
    text-align: right;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0.59259rem 0.88889rem 0.59259rem 0.44444rem;
    font-size: 0.38889rem;
    line-height: 1;
    color: #666;
    background-color: #fff;
    background-clip: padding-box;
  }
}

.btm_line,
._photo {
  border-bottom: 1px solid #dbdbdb;
  overflow: hidden;
  p:first-child {
    padding: $padding-base 0;
  }
  ._tip {
    width: 99%;
    float: left;
    padding: $padding-base 0;
  }
}
._photo > div {
  float: left;
  width: 50%;
  box-sizing: border-box;
  height: 500px;
}
._photo {
  overflow: hidden;
  ._left {
    border-right: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
  }
  ._right {
    border-bottom: 1px solid #dbdbdb;
  }
}
.second{
  p{
    font-size: $font-size-base;
  }
}
</style>
